import { Component, OnInit } from '@angular/core';
import { RxjsService } from "../../service/rxjs";
@Component({
    selector: 'app-book',
    templateUrl: './book.page.html',
    styleUrls: ['./book.page.scss'],
})
export class BookPage implements OnInit {
    imgUrl: string = '../../assets/img/book';
    bookList: Array<any> = [
        {
            title: "来自开发者的信",
            author: "浅",
            avatar: "qian",
            content: `
##前言
Hello 各位，这里是萌新一枚。新的一年马上就来了，首先祝大家元旦快乐，新的一年心想事成，学业有成哦。
我趁着这几天放假，总算完成了产品的更新迭代，暂时命名为“AI小助手”。（所以并不是我鸽啊，实在是加班比较多）并且永久开源免费。
![](${this.imgUrl}/1/cat.png)

###AI小助手的功能
- ####技能描述转代码
由于工期紧张，在迭代的过程中我并没有写新的算法。目前只支持一些简单的视为技，不过后面我会慢慢完善。
- ####阅读
也就是底部栏的“Book”。这里我会写一些不限于无名杀的简单知识，对前端感兴趣的朋友可以看看哦。当然也欢迎各位大佬前来投稿。只需要了解最简单的[Markdown语法](http://http://pandao.github.io/editor.md/examples/full.html)\n

###未来更新方向
- ####算法
中华汉字博大精深，尤其是无名杀的技能变化多样，所以想尽善尽美是不可能的，这也是我当初为什么给它定义为“专为萌新服务”。所以这一部分是难度最大也是软件的核心部分。我暂时不可能将它短期内写的很完美。
- ####主题
难度不大，应该很快就能完成。不过本人更倾向于有现成的东西去写。所以需要各位美工能提供一些设计稿或者素材，设计稿最好精确到px。
- ####设置项
同上，目前AI小助手还处于很初期的状态。很多基本功能都还没有，不过稍安勿躁。
- ####语音输入
百度AI有现成的接口，实现起来应该不难。可以解放双手。不过这个功能貌似有点鸡肋。
- ####在线交互
其实目前AI小助手只有在发送你的技能描述的时候才会联网，远程服务器将句子结构分解后，剩下的解析均是本地操作。所以它完全可以视为一款单机软件。这里的说在线交互就是一些登录注册，发布文章之类的。联网是否有必要我觉得有待考虑。

###最后
祝大家玩得开心~

			`
        }, {
            title: "FAQ以及已知Bug",
            author: "浅",
            avatar: "qian",
            content: `
##FAQ
- ####AI小助手的开发框架是什么？
前端：Ionic4 + Angular7 
后端：Django
具体的会专门写一篇文章详细叙述。
- ####AI小助手的开发原理是什么？
    主要分为两步：
    + ####分解句子结构
    这一部分由百度AI的依存句法接口完成。之后我将得到句子之间每个部分之间的依存关系，以及词性。由于传送回的是json格式，所以我做了一个可视化模块将其绘制出来，例如下面这样：
    ![](${this.imgUrl}/1/canvas.png)
    其中连线代表其与父元素的关系：例如SBV为主谓关系，ATT为定中关系，VOB为介宾关系等。
    + ####根据依存关系以及词性转化
    目前的算法大致如下：
        1. 判断技能类型
        2. 获取类型之后移交至相应的模块处理
        3. 相应的模块根据句子部分之间的依存关系以及词性开始遍历每一个可能出现的要素。例如视为技，需遍历合适的卡牌，卡牌区域，数量，卡牌限制条件等等。期间sentence.ts是核心服务，它将处理例如寻找合适的子元素，获取翻译，格式化等等一系列最基本的操作
        4. 获得结果后将结果发送给阅读页面生成一个临时页面，呈现给用户
    

- ####Vconsole是什么？
VConsole是腾讯开发的，适用于移动端调试的强大工具。没错，它现在就浮现在你的页面上。它能够完成pc端控制台大部分的事，包括查看元素，网络，运行脚本等等。
- ####Vconsole怎么使用呢？
对于大多数用户来说，它可以显示软件运行的出现的bug，并且显示一些帮助信息。帮助你了解运行过程。
- ####热更新是什么？
没错，AI小助手内置热更新，这是由Ionic Appfollow提供的，它将会在有可用更新时自动更新。当你下次打开AI小助手时，它将焕然一新。所以每次启动都可能会有惊喜哦~

##已知bug
1. 目前只能识别视为技，任何不是视为技或者技能描述不规范的将不会有任何反馈，之后会写个提示
2. 发送按钮显示旋转动画时会出现错位。暂时不知道原因
3. 代码转换后可能会在function()右侧出现**/xx/**乱码，目前推测是因为安卓内置浏览器在new Function()的过程中出现
4. 阅读界面的头像可能会错位，更新框架之后我暂时还不知道是否修复
5. 某些安卓版本过低的手机可能无法显示沉浸式状态栏
6. 如果你点击某些地方没有反应，很可能我还没写
7. 有任何bug欢迎反馈

            `
        }, {
            title: "前端发展史",
            author: "kidney",
            avatar: "kidney",
            content: `
##从静态走向动态
早期网页的局限性非常大。

1. 所有的网页都基于HTML页面，因为没有任何手段可以控制局部内容的显示和隐藏，因此任何局部的变化哪怕只多出一个标点符号，都只能重新下载一个新的页面。

2. 计算任务只能在服务端实现。由于网速限制，与服务器通信的过程是非常缓慢的，并且此过程是同步阻塞的，于是会出现这样的场景：用户提交一个表单，然后整个页面消失，浏览器呈现白屏，经过漫长的等待，浏览器渲染出一个和之前一模一样的页面，只不过输入框旁边多了一排红色小字：用户名错误。

3. 所有页面都是静态的，这意味着一个电商网站有一千种商品，哪怕页面布局一模一样，也必须写一千个单独的页面。

- ####1995年网景推出了JavaScript
> 实现了客户端的计算任务（如表单验证）。

- ####1999年W3C发布第四代HTML标准，同年微软推出用于异步数据传输的ActiveX
> 随即各大浏览器厂商模仿实现了XMLHttpRequest。这标识着Ajax的诞生，特别是在谷歌使用Ajax技术打造了Gmail和谷歌地图之后，Ajax获得了巨大的关注。Ajax是Web网页迈向Web应用的关键技术，它标识着Web2.0时代的到来。

至此，早期的Document终于进化为了Web page，上述三个局限都得到了妥善的解决。

##从后端走向前端

早期的网页开发是由后端主导的，前端能做的也就是操作一下DOM。
起初制约Web开发从后到前的因素很简单，就是前端很多事干不了或干不好，当时的浏览器性能弱，标准化程度低。特别是占据大量市场份额的IE，不仅ugly，并且buggy。
- ####2006年 John Resig发布了jQuery
> jQuery主要用于操作DOM，其优雅的语法、符合直觉的事件驱动型的编程思维使其极易上手，因此很快风靡全球，大量基于jQuery的插件构成了一个庞大的生态系统，更加稳固了jQuery作为JS库一哥的地位。

- ####2008年谷歌发布V8引擎。
>现代浏览器的崛起终结了微软的垄断时代，前端的计算能力一下子变得过剩了。

- ####2009年W3C发布了第五代JavaScript
> 前端的装备得到了整体性的提高，前端界如同改革开放走进了一个令人目不暇接的新时代。

- ####2009年AngularJS诞生
> 随后被谷歌收购。现已发展至Angular7版本
- ####2010年backbone.js诞生。
- ####2011年React和Ember诞生。
- ####2014年Vue.js诞生
发展到这个时间段，前后端分离可谓大势所趋。后端只负责数据，前端负责其余工作，这种分工模式一定是更清晰也更高效的。随着基础设置的不断完善以及代码封装层级的不断提高，使得前端一个人能够完成的事越来越多，这是技术积累的必然结果。就好像今天高中生的知识水平，可能远远超过五百年前的科学家，今天要成为Web全栈工程师，门槛也只会越来越低。

- ####2014年，第五代HTML标准发布。
> H5是由浏览器厂商主导，与W3C合作制定的一整套Web应用规范，至今仍在不断补充新的草案。我们可以清晰的感受到这一系列规范背后隐含的领导者的勃勃雄心：占领所有屏幕。

##从前端走向全端

- ####2009年Ryan Dahl发布node
>node是一个基于V8引擎的服务端JavaScript运行环境，类似于一个虚拟机，也就是说js在服务端语言中有了一席之地。如果说ajax是前端的第一次飞跃，那么node可算作前端的第二次飞跃。它意味着JavaScript走出了浏览器的藩篱，迈出了全端化的第一步。一种流行的组合就是利用Express和Mongo搭建服务端程序。

- ####前端的契机
2007年第一代iphone发布，2008年第一台安卓手机发布。悄然间互联网进入了移动时代。移动端的发展进程和PC的历史如出一辙，一开始都是Native App的天下。但浏览器试图取代操作系统的篡位之心从未消减。相比原生应用，Web APP有太多好处：无须开发两套系统版本、无须安装、无须手动升级、无须审核……我认为最大的好处以及驱动软件形态转向的主要原因在于降低成本，记得13年的时候韩寒说做一个APP大概需要五十万，今天网上比较靠谱的分析评估半年时间从零做出一个稍微像样的APP至少100万，而开发Web App花的钱一定少得多。

- ####前端的未来趋势
制约Web App的因素有很多，但我们可以看到Web App一直在不断修复缺陷、突破局限。你说网页有tab bar，好吧，给你个fullpage API，你说网页不能调取系统功能，好吧，Geolocation API、Vibration API、Luminosity API、Orientation API、Camera API……你说网页不像APP有图标，IOS早就支持在桌面上添加网页链接的快捷图标，还得是乔帮主远见；你说网页必须联网，现在离线的方案也很多啊；你说Web App性能差，这个……你说得对，也就是这个原因，Native App还能作为主流存在一段时间，可是如果Web App的性能逐渐赶上Native了呢？目前的Hybrid、nw.js、Electron、react native、weex等都可以看做Web App在性能方面向Native靠近的尝试。更何况半路又杀出个微信小程序。


            `
}
    ]
    constructor(
        private rxjs: RxjsService,
    ) { }

    ngOnInit() {
    }
    moveTo(page, book) {
        this.rxjs.sendPage(page, {
            title: book.title,
            author: book.author,
            avatar: book.avatar,
            content: book.content
        })
    }

}
